<template>
  <div class="total" id="myChart" ref="myChart"></div>
</template>

<script>
import echarts from "echarts/lib/echarts";
// 引入柱状图
import "echarts/lib/chart/bar";
// 引入饼状图
import "echarts/lib/chart/pie";
// 引入地图
import "echarts/lib/chart/scatter";
// 引入提示框和标题组件
import "echarts/lib/component/tooltip";
import "echarts/lib/component/title";
import "echarts/lib/component/legend";
import "echarts/extension/bmap/bmap";
import axios from "axios";
export default {
  data() {
    return {
      shopsCountData: [],
      shopsData: [],
      zoom: 0
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.showChart();
    });
  },
  methods: {
    showChart() {
      let myChart = echarts.init(this.$refs.myChart);
      axios({
        url: "/pxy/shops/counts",
        method: "get"
      }).then(res => {
        this.shopsCountData = res.data;
        myChart.setOption(this.mapOptions, true);
      });
      myChart.on("finished", async () => {
        // 从echarts对象中获取bmap对象
        var bmap = myChart
          .getModel()
          .getComponent("bmap")
          .getBMap();
        // 设置最小缩放值
        bmap.setMinZoom(5);
        // 设置最大缩放值
        // bmap.setMaxZoom(15);
        bmap.setMapStyleV2({
          styleId: "9f7e1d32afac22eacc496c5fa2c89a3a"
        });
        console.log("finished")
        // 缩放结束后的事件
        bmap.addEventListener("zoomend", e => {
          let zoom = this.zoom;
          this.zoom = bmap.getZoom();
          if (zoom < bmap.getZoom() && bmap.getZoom() == 10) {
            axios({
              url: "/pxy/shops",
              method: "get"
            }).then(res => {
              this.shopsData = res.data;
              let options = this.mapOptions;
              options.bmap.zoom = 10;
              myChart.setOption(this.mapOptions, false);
            });
          }
           else if (zoom > bmap.getZoom() && bmap.getZoom() <= 10) {
              console.log(2);
            this.shopsData = [];
            let options = this.mapOptions;
            myChart.setOption(this.mapOptions, false);
          }
          
        });
      });
    }
  },
  computed: {
    mapOptions() {
      return {
        title: {
          text: "全国门店统计",
          left: "center",
          textStyle: {
            color: "#fff"
          }
        },
        tooltip: {
          trigger: "item"
        },
        bmap: {
          center: [104.072259, 30.663403],
          zoom: 5,
          roam: true,
          mapStyle: {
            styleJson: [
              {
                featureType: "estatelabel",
                elementType: "labels.text.fill",
                stylers: {
                  color: "#8d694eff"
                }
              },
              {
                featureType: "restaurantlabel",
                elementType: "labels",
                stylers: {
                  visibility: "off"
                }
              },
              {
                featureType: "restaurantlabel",
                elementType: "labels.icon",
                stylers: {
                  visibility: "off"
                }
              },
              {
                featureType: "lifeservicelabel",
                elementType: "labels",
                stylers: {
                  visibility: "off"
                }
              },
              {
                featureType: "lifeservicelabel",
                elementType: "labels.icon",
                stylers: {
                  visibility: "off"
                }
              },
              {
                featureType: "transportationlabel",
                elementType: "labels.icon",
                stylers: {
                  visibility: "off"
                }
              },
              {
                featureType: "transportationlabel",
                elementType: "labels",
                stylers: {
                  visibility: "on"
                }
              },
              {
                featureType: "financelabel",
                elementType: "labels.icon",
                stylers: {
                  visibility: "off"
                }
              },
              {
                featureType: "financelabel",
                elementType: "labels",
                stylers: {
                  visibility: "off"
                }
              },
              {
                featureType: "land",
                elementType: "geometry",
                stylers: {
                  color: "#ffffffff"
                }
              },
              {
                featureType: "building",
                elementType: "geometry.fill",
                stylers: {
                  color: "#e7dfd6ff"
                }
              },
              {
                featureType: "building",
                elementType: "geometry.stroke",
                stylers: {
                  color: "#b9a797ff"
                }
              },
              {
                featureType: "estatelabel",
                elementType: "labels.text.stroke",
                stylers: {
                  color: "#ebe1d8ff"
                }
              },
              {
                featureType: "estatelabel",
                elementType: "labels.icon",
                stylers: {
                  visibility: "off"
                }
              },
              {
                featureType: "estatelabel",
                elementType: "labels.text",
                stylers: {
                  fontsize: 28
                }
              },
              {
                featureType: "manmade",
                elementType: "labels.text.fill",
                stylers: {
                  color: "#72533aff"
                }
              },
              {
                featureType: "manmade",
                elementType: "geometry",
                stylers: {
                  color: "#ecececff"
                }
              },
              {
                featureType: "manmade",
                elementType: "labels.text",
                stylers: {
                  fontsize: 36
                }
              },
              {
                featureType: "manmade",
                elementType: "labels.text.stroke",
                stylers: {
                  color: "#b6997fff"
                }
              },
              {
                featureType: "green",
                elementType: "geometry",
                stylers: {
                  color: "#ecececff"
                }
              },
              {
                featureType: "education",
                elementType: "geometry",
                stylers: {
                  color: "#ecececff"
                }
              },
              {
                featureType: "medical",
                elementType: "geometry",
                stylers: {
                  color: "#ecececff"
                }
              },
              {
                featureType: "scenicspots",
                elementType: "geometry",
                stylers: {
                  color: "#ecececff"
                }
              },
              {
                featureType: "entertainment",
                elementType: "geometry",
                stylers: {
                  visibility: "off"
                }
              },
              {
                featureType: "estate",
                elementType: "geometry",
                stylers: {
                  color: "#ecececff"
                }
              },
              {
                featureType: "shopping",
                elementType: "geometry",
                stylers: {
                  color: "#ecececff",
                  visibility: "on"
                }
              },
              {
                featureType: "transportation",
                elementType: "geometry",
                stylers: {
                  color: "#ecececff"
                }
              },
              {
                featureType: "transportation",
                elementType: "labels.text.fill",
                stylers: {
                  color: "#72533aff"
                }
              },
              {
                featureType: "transportation",
                elementType: "labels.text.stroke",
                stylers: {
                  color: "#b6997fff"
                }
              },
              {
                featureType: "transportation",
                elementType: "labels.text",
                stylers: {
                  fontsize: 36
                }
              },
              {
                featureType: "medical",
                elementType: "labels.text.fill",
                stylers: {
                  color: "#72533aff"
                }
              },
              {
                featureType: "medical",
                elementType: "labels.text.stroke",
                stylers: {
                  color: "#b6997fff"
                }
              },
              {
                featureType: "medical",
                elementType: "labels.text",
                stylers: {
                  fontsize: 36
                }
              },
              {
                featureType: "education",
                elementType: "labels.text.fill",
                stylers: {
                  color: "#72533aff"
                }
              },
              {
                featureType: "education",
                elementType: "labels.text.stroke",
                stylers: {
                  color: "#b6997fff"
                }
              },
              {
                featureType: "education",
                elementType: "labels.text",
                stylers: {
                  fontsize: 36
                }
              },
              {
                featureType: "carservicelabel",
                elementType: "labels",
                stylers: {
                  visibility: "off"
                }
              },
              {
                featureType: "carservicelabel",
                elementType: "labels.icon",
                stylers: {
                  visibility: "off"
                }
              },
              {
                featureType: "shoppinglabel",
                elementType: "labels.icon",
                stylers: {
                  visibility: "off"
                }
              },
              {
                featureType: "hotellabel",
                elementType: "labels.icon",
                stylers: {
                  visibility: "off"
                }
              },
              {
                featureType: "governmentlabel",
                elementType: "labels.icon",
                stylers: {
                  visibility: "off"
                }
              },
              {
                featureType: "companylabel",
                elementType: "labels.icon",
                stylers: {
                  visibility: "off"
                }
              },
              {
                featureType: "businesstowerlabel",
                elementType: "labels.icon",
                stylers: {
                  visibility: "off"
                }
              },
              {
                featureType: "entertainmentlabel",
                elementType: "labels",
                stylers: {
                  visibility: "off"
                }
              },
              {
                featureType: "entertainmentlabel",
                elementType: "labels.icon",
                stylers: {
                  visibility: "off"
                }
              },
              {
                featureType: "medicallabel",
                elementType: "labels.icon",
                stylers: {
                  visibility: "off"
                }
              },
              {
                featureType: "educationlabel",
                elementType: "labels.icon",
                stylers: {
                  visibility: "off"
                }
              },
              {
                featureType: "scenicspotslabel",
                elementType: "labels.icon",
                stylers: {
                  visibility: "off"
                }
              },
              {
                featureType: "airportlabel",
                elementType: "labels.icon",
                stylers: {
                  visibility: "off"
                }
              },
              {
                featureType: "airportlabel",
                elementType: "labels.text",
                stylers: {
                  fontsize: 36
                }
              },
              {
                featureType: "airportlabel",
                elementType: "labels.text.fill",
                stylers: {
                  color: "#72533aff"
                }
              },
              {
                featureType: "airportlabel",
                elementType: "labels.text.stroke",
                stylers: {
                  color: "#b6997fff"
                }
              },
              {
                featureType: "scenicspotslabel",
                elementType: "labels.text",
                stylers: {
                  fontsize: 28
                }
              },
              {
                featureType: "scenicspotslabel",
                elementType: "labels.text.fill",
                stylers: {
                  color: "#4a4a4aff"
                }
              },
              {
                featureType: "scenicspotslabel",
                elementType: "labels.text.stroke",
                stylers: {
                  color: "#ffffffff"
                }
              },
              {
                featureType: "educationlabel",
                elementType: "labels.text.fill",
                stylers: {
                  color: "#8d694eff"
                }
              },
              {
                featureType: "educationlabel",
                elementType: "labels.text.stroke",
                stylers: {
                  color: "#ebe1d8ff"
                }
              },
              {
                featureType: "educationlabel",
                elementType: "labels.text",
                stylers: {
                  fontsize: 26
                }
              },
              {
                featureType: "medicallabel",
                elementType: "labels.text.fill",
                stylers: {
                  color: "#8d694eff"
                }
              },
              {
                featureType: "medicallabel",
                elementType: "labels.text.stroke",
                stylers: {
                  color: "#ebe1d8ff"
                }
              },
              {
                featureType: "medicallabel",
                elementType: "labels.text",
                stylers: {
                  fontsize: 24
                }
              },
              {
                featureType: "businesstowerlabel",
                elementType: "labels.text.stroke",
                stylers: {
                  color: "#ebe1d8ff"
                }
              },
              {
                featureType: "businesstowerlabel",
                elementType: "labels.text.fill",
                stylers: {
                  color: "#8d694eff"
                }
              },
              {
                featureType: "businesstowerlabel",
                elementType: "labels.text",
                stylers: {
                  fontsize: 24
                }
              },
              {
                featureType: "companylabel",
                elementType: "labels",
                stylers: {
                  visibility: "off"
                }
              },
              {
                featureType: "hotellabel",
                elementType: "labels.text.fill",
                stylers: {
                  color: "#8d694eff"
                }
              },
              {
                featureType: "hotellabel",
                elementType: "labels.text.stroke",
                stylers: {
                  color: "#ebe1d8ff"
                }
              },
              {
                featureType: "hotellabel",
                elementType: "labels.text",
                stylers: {
                  fontsize: 24
                }
              },
              {
                featureType: "shoppinglabel",
                elementType: "labels.text.fill",
                stylers: {
                  color: "#8d694eff"
                }
              },
              {
                featureType: "shoppinglabel",
                elementType: "labels.text.stroke",
                stylers: {
                  color: "#ebe1d8ff"
                }
              },
              {
                featureType: "transportationlabel",
                elementType: "labels.text.fill",
                stylers: {
                  color: "#4a4a4aff"
                }
              },
              {
                featureType: "transportationlabel",
                elementType: "labels.text",
                stylers: {
                  fontsize: 24
                }
              },
              {
                featureType: "scenicspots",
                elementType: "labels.text.fill",
                stylers: {
                  color: "#72533aff"
                }
              },
              {
                featureType: "scenicspots",
                elementType: "labels.text.stroke",
                stylers: {
                  color: "#b6997fff"
                }
              },
              {
                featureType: "scenicspots",
                elementType: "labels.text",
                stylers: {
                  fontsize: 36
                }
              },
              {
                featureType: "governmentlabel",
                elementType: "labels.text.fill",
                stylers: {
                  color: "#4a4a4aff"
                }
              },
              {
                featureType: "scenicspotslabel",
                elementType: "labels",
                stylers: {
                  visibility: "off"
                }
              },
              {
                featureType: "district",
                elementType: "labels.text.fill",
                stylers: {
                  color: "#ffffffff"
                }
              },
              {
                featureType: "district",
                elementType: "labels.text.stroke",
                stylers: {
                  color: "#72533aff",
                  weight: 3.5
                }
              },
              {
                featureType: "town",
                elementType: "labels.text.stroke",
                stylers: {
                  color: "#72533aff",
                  weight: 3
                }
              },
              {
                featureType: "town",
                elementType: "labels.text.fill",
                stylers: {
                  color: "#ffffffff"
                }
              },
              {
                featureType: "village",
                elementType: "labels.text.stroke",
                stylers: {
                  color: "#ffffffff",
                  weight: 2.5
                }
              },
              {
                featureType: "village",
                elementType: "labels.text.fill",
                stylers: {
                  color: "#72533aff",
                  weight: 40
                }
              },
              {
                featureType: "village",
                elementType: "labels.text",
                stylers: {
                  fontsize: 20
                }
              },
              {
                featureType: "highway",
                elementType: "geometry.fill",
                stylers: {
                  color: "#fdf0daff"
                }
              },
              {
                featureType: "highway",
                elementType: "geometry.stroke",
                stylers: {
                  color: "#ffd993ff"
                }
              },
              {
                featureType: "highway",
                elementType: "labels.text.fill",
                stylers: {
                  color: "#000000ff"
                }
              },
              {
                featureType: "highway",
                elementType: "labels.text.stroke",
                stylers: {
                  color: "#ffffffff"
                }
              },
              {
                featureType: "nationalway",
                elementType: "geometry.fill",
                stylers: {
                  color: "#fdf0daff"
                }
              },
              {
                featureType: "nationalway",
                elementType: "geometry.stroke",
                stylers: {
                  color: "#ffd993ff"
                }
              },
              {
                featureType: "nationalway",
                elementType: "labels.text.fill",
                stylers: {
                  color: "#000000ff"
                }
              },
              {
                featureType: "nationalway",
                elementType: "labels.text.stroke",
                stylers: {
                  color: "#ffffffff"
                }
              },
              {
                featureType: "provincialway",
                elementType: "geometry.stroke",
                stylers: {
                  color: "#ffd993ff"
                }
              },
              {
                featureType: "provincialway",
                elementType: "geometry.fill",
                stylers: {
                  color: "#fdf0daff"
                }
              },
              {
                featureType: "provincialway",
                elementType: "labels.text.fill",
                stylers: {
                  color: "#000000ff"
                }
              },
              {
                featureType: "provincialway",
                elementType: "labels.text.stroke",
                stylers: {
                  color: "#ffffffff"
                }
              },
              {
                featureType: "subway",
                elementType: "geometry.fill",
                stylers: {
                  color: "#f5a117ff"
                }
              },
              {
                featureType: "manmade",
                elementType: "labels",
                stylers: {
                  visibility: "on"
                }
              }
            ]
          }
        },
        series: [
          {
            name: "门店数",
            type: "scatter",
            coordinateSystem: "bmap",
            data: this.shopsCountData,
            symbolSize: function(val) {
              return val[2] * 2;
            },
            // label: {
            //     show: true,
            //     formatter: function(params) {
            //         return params.data[3];
            //     }
            // },
            itemStyle: {
              normal: {
                color: "#ddb926"
              }
            },
            tooltip: {
              formatter: function(params, ticket, callback) {
                return (
                  "城市：" + params.data[3] + "<br>门店数：" + params.data[2]
                );
              }
            }
          },
          {
            name: "门店位置",
            type: "scatter",
            coordinateSystem: "bmap",
            data: this.shopsData,
            symbol: "pin",
            symbolSize: 20,
            itemStyle: {
              normal: {
                color: "red"
              }
            },
            tooltip: {
              formatter: function(params, ticket, callback) {
                return (
                  "店铺名称：" + params.data[2] + "<br>地址：" + params.data[3]
                );
              }
            }
          }
        ]
      };
    }
  }
};
</script>

<style>
.total {
  width: 100%;
  height: 500px;
}
</style>